import type { IColumnsOption } from 'vc';
import { CellRenderMap, INDEX, COMPANY_NAME, BUSINESS_DATA, REGISTERED_CAPITAL, PROVINCE, CITY, COUNTRY, INDUSTRY_CATEGORY, INFO_SOURCE } from '@/utils/tableColumn';
import { isNull } from '@vc/utils';

export function useTable() {
  const columns = ref<IColumnsOption[]>([
    { ...INDEX },
    { ...COMPANY_NAME },
    {
      field: 'notificationNumber',
      title: '整改通知书编号',
      width: 230,
      sortable: true,
      sortBy: 'notificationNumber',
      showOverflow: 'ellipsis',
      cellRender: {
        name: CellRenderMap.HighLight
      }
    },
    {
      width: 110,
      title: '下达时间',
      field: 'issuedDate',
      align: 'center',
      sortable: true,
      sortBy: 'issuedDate'
    },
    {
      ...INFO_SOURCE(''),
      width: 110,
      title: '限期整改通知书'
    },
    {
      width: 100,
      title: '整改要求',
      align: 'center',
      slots: {
        default({ row }) {
          return row.details?.length ? (
            <>
              <span class="details" onClick={() => openDetailModal(row.details)}>
                详情
              </span>
            </>
          ) : (
            '-'
          );
        }
      }
    },

    { ...PROVINCE },
    { ...CITY },
    { ...COUNTRY },
    { ...INDUSTRY_CATEGORY },
    { ...BUSINESS_DATA },
    { ...REGISTERED_CAPITAL }
  ]);

  const detailsColumn = ref<IColumnsOption[]>([
    { ...INDEX },
    {
      minWidth: 180,
      title: '整改时限',
      field: 'timeLimitStartDate',
      align: 'center',
      formatter({ row }) {
        return `${row.timeLimitStartDate || '-'} 至 ${row.timeLimitExpirationDate || '-'}`;
      }
    },
    {
      minWidth: 200,
      title: '整改问题',
      field: 'problem',
      showOverflow: 'title',
      cellRender: { name: 'Clamp' }
    },
    {
      minWidth: 200,
      title: '整改措施',
      field: 'correctiveActions',
      showOverflow: 'title',
      cellRender: { name: 'Clamp' }
    },
    {
      minWidth: 200,
      title: '整改计划',
      field: 'correctiveActionPlan',
      showOverflow: 'title',
      cellRender: { name: 'Clamp' }
    },
    {
      minWidth: 110,
      title: '是否完成整改',
      field: 'tagCompleted',
      align: 'center',
      formatter({ cellValue }) {
        return isNull(cellValue) ? '-' : cellValue === 1 ? '是' : '否';
      }
    }
  ]);

  const showDetailModal = ref(false);
  const detailsTableData = ref([]);
  const openDetailModal = (data) => {
    detailsTableData.value = data;
    showDetailModal.value = true;
  };

  return {
    columns,
    detailsColumn,
    detailsTableData,
    showDetailModal
  };
}
